<template>
  <div>
    <div class="photo">
      <pannel
        v-for="(obj, index) in arr"
        :key="index"
        :imgurl="obj.dogImgUrl"
        :name="obj.dogName"
        @add="addFn"
      >
      </pannel>
    </div>
    <div class="dog">
      你喜欢的狗如下:
      <ul>
        <li v-for="(val, index) in newArr" :key="index">{{ val }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import pannel from "./components/Pannel3";

export default {
  components: {
    pannel,
  },
  data() {
    return {
      arr: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3469716026,2816395410&fm=26&gp=0.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1172026112,1192290512&fm=26&gp=0.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2739741436,1526108782&fm=26&gp=0.jpg",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1349664647,2183257570&fm=26&gp=0.jpg",
          dogName: "萨摩耶",
        },
      ],
      newArr: [],
    };
  },
  methods: {
    addFn(name) {
      this.newArr.push(name);
    },
  },
};
</script>

<style scoped>
</style>
